import { AntdModalProps } from '@/hooks/useAntdModal';
import { ArrowRightOutlined } from '@ant-design/icons'
import { saveNotice } from '@/service/globalSetting';
import { Button, Checkbox, Divider, Form, Input, Modal, Radio, Select, Space, Switch } from 'antd';
import React from 'react';
const PushPanel = ({ noticeType, name, text }: any): any => {

  if (noticeType?.includes(name)) {
    return <div>
      <Divider >{text}</Divider>
      <Form.Item name={`${name}Mode`} label="推送方式">
        <Radio.Group>
          <Radio value={`${name}Api`}>api</Radio>
          <Radio value={`${name}Webhook`}>webhook</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item noStyle shouldUpdate={(a, b) => a[`${name}Mode`] != b[`${name}Mode`]}>
        {
          ({ getFieldValue }) => {
            const mode = getFieldValue(`${name}Mode`);
            if (mode === `${name}Api`) {
              return <>
                <Form.Item label='选择Api' name={`${name}Api`} rules={[{
                  required: true,
                  message: '选择Api'
                }]}>
                  <Input />
                </Form.Item>
                <Form.Item label='接收人'>
                  <Space style={{ width: '100%' }}>
                    <Form.Item noStyle name={`${name}Receive`} rules={[{
                      required: true,
                      message: '接收人'
                    }]}>
                      <Input style={{ width: 300 }} />
                    </Form.Item>
                    <Form.Item valuePropName='checked' noStyle name={`${name}ReceiveMapping`}>
                      <Checkbox style={{ width: 100 }}>字段映射</Checkbox>
                    </Form.Item>
                    <Form.Item noStyle shouldUpdate={(a, b) => a[`${name}ReceiveMapping`] != b[`${name}ReceiveMapping`]}>
                      {({ getFieldValue }) => {
                        if (getFieldValue(`${name}ReceiveMapping`)) {
                          return <Space>
                            <Form.Item noStyle name={`${name}ReceiveOriginalField`}>
                              <Input />
                            </Form.Item>
                            <span>
                              <ArrowRightOutlined />
                            </span>
                            <Form.Item noStyle name={`${name}ReceiveMappingField`}>
                              <Input />
                            </Form.Item>
                          </Space>
                        }
                        return null

                      }}
                    </Form.Item>

                  </Space>
                </Form.Item>

              </>

            }
            return <Form.Item label='webhook地址' name={`${name}Webhook`} rules={[{
              required: true,
              message: 'webhook地址'
            }]}>
              <Input />
            </Form.Item>
          }
        }
      </Form.Item>
    </div>
  }
  return null
}
const FeishuPanle = ()=>{
 return <div>
   <Divider >飞书</Divider>
      <Form.Item name={['feishu','mode']} label="推送方式">
        <Radio.Group>
          <Radio value='api'>api</Radio>
          <Radio value='webhook'>webhook</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item label='标题颜色' name={['feishu','titleColor']}>
        <Input/>
      </Form.Item>
      <Form.Item noStyle shouldUpdate={(a, b) => a.feishu?.mode != b.feishu?.mode }>
        {
          ({ getFieldValue }) => {
            const mode = getFieldValue(['feishu','mode']);
            if (mode === 'api') {
              return <>
                <Form.Item label='选择Api' name={['feishu','api']} rules={[{
                  required: true,
                  message: '选择Api'
                }]}>
                  <Input />
                </Form.Item>
                <Form.Item label='接收人'>
                  <Space style={{ width: '100%' }}>
                    <Form.Item noStyle name={['feishu','receive']} rules={[{
                      required: true,
                      message: '接收人'
                    }]}>
                      <Input style={{ width: 300 }} />
                    </Form.Item>
                    <Form.Item valuePropName='checked' noStyle name={['feishu','receiveMapping']}>
                      <Checkbox style={{ width: 100 }}>字段映射</Checkbox>
                    </Form.Item>
                    <Form.Item noStyle shouldUpdate={(a, b) => a.feishu.receiveMapping != b.feishu.receiveMapping}>
                      {({ getFieldValue }) => {
                        if (getFieldValue(['feishu','receiveMapping'])) {
                          return <Space>
                            <Form.Item noStyle name={['feishu','receiveOriginalField']}>
                              <Input />
                            </Form.Item>
                            <span>
                              <ArrowRightOutlined />
                            </span>
                            <Form.Item noStyle name={['feishu','receiveMappingField']}>
                              <Input />
                            </Form.Item>
                          </Space>
                        }
                        return null

                      }}
                    </Form.Item>

                  </Space>
                </Form.Item>

              </>

            }else if(mode==='webhook'){
              return <Form.Item label='webhook地址' name={['feishu','webhook']} rules={[{
                required: true,
                message: 'webhook地址'
              }]}>
                <Input />
              </Form.Item>
            }
           return null
          }
        }
      </Form.Item>
 </div>

}
const SaveNotice = ({ form, modalProps, closeModal, refresh, }: AntdModalProps) => {
  const onOk = async () => {
    let data = await form.validateFields()
 
    data.default = data.default ? 1 : 0
    data.status = data.status ? 1 : 0
   
    if (Array.isArray(data.noticeType)) {
      data.noticeType = data.noticeType.join(',')
    }
    if(data.feishu){
      data.feishu = JSON.stringify(data.feishu)
    }
    
    await saveNotice(data)
    closeModal();
    refresh()
  }
  const onPreview = () => {
    let text = form.getFieldValue('template');
    let html = text.replace(/\n/g, '<br/>');
    html = html.replace(/\*\*([\s\S]+)\*\*/g, '<b>$1</b>')
    html = html.replace(/\[([\s\S]+)\]\(([\s\S]+)\)/, '<a herf="$2">$1</a>')
    //  html = html.replace(/<%=[\s\S]?%>/g,'字段替换')
    console.log({ html })
    Modal.info({
      icon: null,
      width: 600,
      title: '预览',
      content: <div dangerouslySetInnerHTML={{ __html: html }}></div>
    })
  }
  return (<Modal width={800} title="账号类型" {...modalProps} onOk={onOk}>
    <Form form={form} labelCol={{ span: 4 }}
      initialValues={{
        status:true
      }}
    >
      <Form.Item hidden name='id'>
        <Input />
      </Form.Item>
      <Form.Item label="名称" name='title' rules={[{
        required: true,
        message: '账号类型'
      }]}>
        <Input placeholder='名称' />
      </Form.Item>
      <Form.Item label="通知类型" name='noticeType' rules={[{
        required: true,
        message: '通知类型'
      }]}>
        <Select mode='multiple' placeholder="请选择" options={[{
          value: 'feishu',
          label: '飞书'
        }]} />
      </Form.Item>
      <Form.Item noStyle shouldUpdate={(a, b) => a.noticeType != b.noticeType}>
        {({ getFieldValue }) => {
          const noticeType = getFieldValue('noticeType')||''
          // let children: any[] = [
          //   <PushPanel key='feishu' noticeType={noticeType} name='feishu' text='飞书' />,
          //   <PushPanel key='weixin' noticeType={noticeType} name='weixin' text='微信' />,
          //   <PushPanel key='dingding' noticeType={noticeType} name='dingding' text='钉钉' />,
          // ].filter(v => v)



          return <div>
            {noticeType.includes('feishu')&& <FeishuPanle/>}         
          </div>
        }}
      </Form.Item>


      <Form.Item help={<Button onClick={onPreview} size='small'>预览</Button>} label="通知模板" name='template' >
        <Input.TextArea rows={10} />
      </Form.Item>
      <Form.Item label='状态' name='status' valuePropName='checked'>
        <Switch/>
      </Form.Item>
      {/* <Form.Item label="上次推送数据" name='lastPushData'>
        <Input.TextArea rows={4} />
      </Form.Item> */}
    </Form>
  </Modal>)
}
export default SaveNotice